<template>
	<div class="normal-word-container">
		<div class="header">
			<p class="title-text">{{ $t('common-expressions') }}</p>
		</div>
		<div class="content">
			<p v-for="(item, index) in normalWord" :key="index" @click="sendNormalMessage(item.value)">{{ item.value }}</p>
		</div>
	</div>
</template>

<script>
import { sendMessageToRecord } from '@/utils/message';
import zcoIMEvent from '@/store/event';
export default {
	data() {
		return {
			normalWord: [
				{ value: this.$t('help-words') },
				{ value: this.$t('business-words') },
				{ value: this.$t('keep-you-little-time') },
				{ value: this.$t('speak-slowly') },
				{ value: this.$t('inconvenience-caused') },
				{ value: this.$t('criticism') },
				{ value: this.$t('transfer-other') },
				{ value: this.$t('goodbye') }
			]
		};
	},
	methods: {
		sendNormalMessage(message) {
			const data = sendMessageToRecord('text', message, ZcoIM.agent, 'in-progress');
			ZcoIM.setChatMessage(data);
			zcoIMEvent.emitTextMessage(data);
		}
	}
};
</script>

<style scoped>
.normal-word-container {
	width: 288px;
	height: 228px;
	background: #ffffff;
	box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.14);
	border-radius: 2px;
	border: 1px solid #eeeff1;
	position: absolute;
	bottom: 110%;
	left: 12%;
	z-index: 10;
}
.header {
	margin: 0 18px;
	border-bottom: 1px solid #e9e9ea;
}
.title-text {
	margin: 14px 0;
	font-size: 13px;
}
.content {
	margin-left: 18px;
	height: 166px;
	padding-top: 14px;
	overflow-y: auto;
}
p {
	cursor: pointer;
	font-size: 12px;
	color: #4c4c4c;
	margin-right: 18px;
	margin-bottom: 16px;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
	width: 6px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
	border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #dddfe1;
}
</style>
